<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('充值')"/>
    <th:block th:include="include :: bootstrap-editable-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-recharge-order-add">
        <input id="id" th:value="${member.id}" type="hidden"/>
        <input id="productId" name="productId" type="hidden"/>
        <div class="form-group">
            <label class="col-sm-3 control-label">入账会员手机号：</label>
            <div class="col-sm-4">
                <div class="input-group">
                    <input class="form-control" type="text" id="memberPhone" th:value="${member.phone}" disabled>
                </div>
            </div>
        </div>
        <div class="form-group paySuccessHide">
            <label class="col-sm-3 control-label"><span style="color: red; ">*</span>选择充值金额：</label>
            <div class="col-sm-8">
                <th:block th:with="productList=${productList}">
                <button type="button" class="btn btn-sm btn-default btn-amount" th:data-product-id="${one.productId}" th:id="${'amount'+one.productId}" th:each="one:${productList}"
                        onclick="changeAmount(this)" th:data-price="${one.price}" th:data-credit="${one.benefitCredit}" th:data-amount="${one.benefitAmount}" style="margin-left: 5px;padding: 5px"><i
                        class="fa fa-rmb"></i><span th:text="${one.price}"></span>
                </button>
                </th:block>
                <button type="button" class="btn btn-sm btn-default  btn-amount" id="amountCustom" onclick="unlock()">
                    自定义
                </button>
                <span id="shopRemark" class="help-block m-b-none" style="color: green;"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"><span style="color: red; ">*</span>充值金额：</label>
            <div class="col-sm-4">
                <div class="input-group">
                    <span class="input-group-addon">¥</span>
                    <input class="form-control" id="rechargeMoney" type="number" value="100" name="amount" required>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">订单备注：</label>
            <div class="col-sm-6">
                <input class="form-control" type="text" id="orderRemark" name="orderRemark"/>
            </div>
        </div>
        <div class="form-group paySuccessHide">
            <label class="col-sm-3 control-label"></label>
            <div class="col-sm-6">
                <button type="button" class="btn btn-sm btn-success" onclick="createOrder()"><i
                        class="fa fa-check"></i>确认充值
                </button>
            </div>
        </div>
        <div class="form-group" id="payStatusBox">
            <label class="col-sm-3 control-label">付款状态：</label>
            <div class="col-sm-7">
                <div id="paySuccess" style="color:green">付款成功</div>
                <div id="prePay" style="color:red">待付款</div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script type="text/javascript">
    var prefix = ctx + "back/shopMember";
    var isClick = false;
    $('#paySuccess').hide();
    $('#payStatusBox').hide();
    $('#amountCustom').removeClass("btn-default");
    $('#amountCustom').addClass("btn-primary");
    function createOrder() {
        let amount = $('input[name="amount"]').val();
        if (parseFloat(amount) < 1) {
            $.modal.alertError("充值金额不能少于1元！")
            return false;
        }
        if(isClick){
            return;
        }
        var memberPhone = $('#memberPhone').val();
        var memberId = $('#id').val();
        var productId = $('#productId').val();
        var orderRemark = $('#orderRemark').val();
        $.modal.confirm("请核实你需要充值的会员手机号【"+memberPhone+"】，充值金额为【"+amount+"】元？", function () {
            isClick = true;
            $.post(prefix + "/recharge", {amount: amount,memberId:memberId,productId:productId,orderRemark:orderRemark}, function (result) {
                if (parseInt(result.code) === 0) {
                    $('#payStatusBox').show();
                    $('#prePay').hide();
                    $('#paySuccess').show();
                    $('#orderRemark').attr("disabled",true);
                    $('.paySuccessHide').hide();
                    $.operate.successCallback(result);
                }else{
                    $('#payStatusBox').hide();
                    isClick = false;
                    $.modal.alertError(result.msg)
                }
            });
        });
    }


    $('input[name="amount"]').blur(function () {
        var amount = $('input[name="amount"]').val();
        $('#productId').val(0);
        $('#shopRemark').html('无赠送积分');
        $('.btn-amount').each(function(){
            var price = $(this).attr("data-price");
            if(parseFloat(amount).toFixed(2) == parseFloat(price).toFixed(2)){
                changeAmount(this);
                return true;
            }
        });
    });

    function changeAmount(_this) {
        var price = $(_this).attr("data-price");
        var productId = $(_this).attr("data-product-id");
        var benefitCredit = $(_this).attr("data-credit");
        var benefitAmount = $(_this).attr("data-amount");
        $('input[name="amount"]').val(price);
        $('.btn-amount').removeClass("btn-primary");
        $('.btn-amount').addClass("btn-default");
        $(_this).removeClass("btn-default");
        $(_this).addClass("btn-primary");
        var shopRemark = '';
        if(''!=benefitCredit && 0!= benefitCredit && '0'!=benefitCredit){
            shopRemark += '<i class="fa fa-info-circle"></i>'+'赠送'+benefitCredit+'积分'+'<br/>';
        }
        if(''!=benefitAmount && 0!= benefitAmount && '0'!=benefitAmount){
            shopRemark += '<i class="fa fa-info-circle"></i>'+'赠送'+benefitAmount+'元'+'<br/>';
        }
        $('#shopRemark').html(shopRemark);
        $('#productId').val(productId);
        $('#rechargeMoney').attr('readonly', true);
    }

    function unlock() {
        $('#productId').val(0);
        $('input[name="amount"]').val(1);
        $('.btn-amount').removeClass("btn-primary");
        $('.btn-amount').addClass("btn-default");
        $('#amountCustom').removeClass("btn-default");
        $('#amountCustom').addClass("btn-primary");
        $('#shopRemark').html('');
        $('#rechargeMoney').attr('readonly', false)
    }


    function submitHandler() {
        // let amount = $('input[name="amount"]').val();
        // if (parseFloat(amount) < 100) {
        //     $.modal.alertError("充值金额不能少于100元！")
        //     return false;
        // }
        // if ($.validate.form()) {
        //     $.operate.save(prefix + "/add", $('#form-recharge-order-add').serializeArray());
        // }
    }
</script>
</body>
</html>
